<template>
  <view class="page">
    <view class="login">
      <view class="mpwx-login">
        <view class="loginLogo">
          <view class="loginContent">
            <u-form :model="formData" :rules="rules" ref="uForm" labelWidth="110rpx">
              <view style="margin-bottom: 100rpx;">
                <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                  <image class="avatar" :src="getAvatar"></image>
                  <text class="loginLogoText">点击授权头像</text>
                </button>
              </view>
              <u-form-item label="昵称" prop="nickName" borderBottom>
                <u-input v-model="formData.nickName" placeholder="请输入昵称" type="nickname" border="none"></u-input>
              </u-form-item>
            </u-form>
            <view class="submitBtn">
              <u-button type="success" size="large" @click="onSubmit">登 录</u-button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="muted">微信授权后才可进行更多操作哦</view>
  </view>
</template>

<script>
import config from '../../request/config'
import userApi from '../../request/api/auth'
import { mapActions, mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      formData: {
        nickName: '',
        avatar: '',
      },
      rules: {
        nickName: [{
          required: true,
          message: '请输入昵称',
          trigger: ['blur', 'change']
        }],
      },
      isShow: true,
    }
  },
  computed: {
    ...mapState('userInfo', ['token', 'user']),
    getAvatar() {
      const userAvatar = this.user.avatar 
      if (userAvatar){
        return config.baseUrl + userAvatar
      } else {
        return 'https://sanshengcai.com/home/images/avatar.png'
      }
    },
  },
  async beforeMount() {
    if (!this.token) this.SET_TOKEN('')
    uni.showLoading({
      title: '加载中',
      mask: true,
    });
    try {
      await this.wxLogin()
    } finally {
      uni.hideLoading()
    }
    this.formData.avatar = this.user.avatar
    this.formData.nickName = this.user.nickName
  },
  methods: {
    ...mapActions('userInfo', ['wxLogin']),
    ...mapMutations('userInfo', ['SET_TOKEN']),
    //获取微信头像
    async onChooseAvatar(e) {
      uni.showLoading({
        title: '加载中',
        mask: true,
      });
      try {
        var { imgUrl } = await uni.$http.upload('/system/user/profile/upload', e.detail.avatarUrl)
      } finally {
        uni.hideLoading();
      }
      this.$store.commit('userInfo/SET_USER', { ...this.user, avatar: imgUrl })
      this.formData.avatar = imgUrl
    },
    async onSubmit() {
      await this.$refs.uForm.validate()
      uni.showLoading({
        title: '加载中',
        mask: true,
      });
      try {
        await userApi.updateUserProfile({
          ...this.formData,
          userId: this.user.userId,
        })
      } finally {
        uni.hideLoading()
      }
      // 同步修改本地数据
      this.$store.commit('userInfo/SET_USER', { ...this.user, ...this.formData })
      // 跳转首页
      uni.switchTab({ url: '/pages/index/index' })
    },
  }
}
</script>

<style scoped lang="scss">
.page {
  background-color: #fff;

  .login {
    height: auto;

    .mpwx-login {
      height: 100%;

      .avatar {
        display: inline-block;
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        border: 1px solid #eee;
        overflow: hidden;
      }

      .user-name {
        height: 40rpx;
      }

      .image {
        width: 50rpx;
        height: 50rpx;
      }
    }

    .h5-login {
      padding-top: 100rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;
      box-sizing: border-box;

      .logo {
        width: 280rpx;
        height: 80rpx;
        margin-bottom: 50rpx;
      }

      .input {
        width: 670rpx;
        border-bottom: 1px solid #2295ff;
        margin-top: 30rpx;
      }

      .sms-btn {
        border: 1px solid #2295ff;
        width: 176rpx;
        height: 60rpx;
        box-sizing: border-box;
      }

      .wx-login {
        margin-top: 60rpx;

        .image {
          margin-top: 40rpx;
          width: 80rpx;
          height: 80rpx;
        }
      }
    }
  }
}

// 以下是登录页面测试功能 开始
.avatar-wrapper {
  margin-top: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;

  .avatar {
    height: 120rpx;
    width: 120rpx;
    border-radius: 60rpx;
    border: 1px solid #eee;
    margin-bottom: 20rpx;
  }
}

.avatar-wrapper::after {
  border: none;
}

.nameContent {
  display: flex;
  margin-top: 50rpx;
  border-bottom: 2rpx solid #eee;
  padding: 20rpx 40rpx;
  width: 100vw;
  box-sizing: border-box;
  font-size: 28rpx;
  align-items: center;

  .title {
    margin-right: 40rpx;
  }
}

.loginLogo {
  .loginContent {
    padding: 0 30rpx;
    .loginLogoText {
      font-size: 24rpx;
      color: #828282;
      margin-top: 20rpx;
    }
  }
}

.muted {
  font-size: 26rpx;
  color: #909399;
  margin-top: 50rpx;
  text-align: center;
}

.submitBtn {
  margin-top: 100rpx;
}
</style>
